<template>
  <div class="pay">
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.parkname"
            placeholder="车位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.orderpay"
            placeholder="应缴金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="formInline.orderstatus" placeholder="缴费状态">
            <el-option label="已缴费" :value="1"></el-option>
            <el-option label="未缴费" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch"
            >查询</el-button
          >
          <el-button
            type="success"
            icon="el-icon-document-copy"
            @click="onExport"
            >全量导出</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            @click="onClear"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table stripe :data="tableData" stripe style="width: 100%">
        <el-table-column
          align="center"
          prop=""
          type="index"
          label="序号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="parkname"
          label="车位名称"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="parkpay" label="车位金额">
        </el-table-column>
        <el-table-column align="center" prop="startdate" label="开始时间">
          <template slot-scope="scope">
            <span v-if="scope.row.startdate">{{
              formatUTCTime(scope.row.startdate)
            }}</span>
            <span v-if="scope.row.startdate == null">暂无</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="enddate" label="结束时间">
          <template slot-scope="scope">
            <span v-if="scope.row.enddate">{{
              formatUTCTime(scope.row.enddate)
            }}</span>
            <span v-if="scope.row.enddate == null">暂无</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderpay" label="应缴金额">
          <template slot-scope="scope">
            <span v-if="scope.row.orderpay">{{ scope.row.orderpay }}</span>
            <span v-if="scope.row.orderpay == null">暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderstatus" label="缴费状态">
          <template slot-scope="scope">
            <pay-Switch :val="scope.row.orderstatus"></pay-Switch>
            <!-- <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="已缴费"
              inactive-text="未缴费"
              :active-value="scope.row.orderstatus != 1"
              :inactive-value="scope.row.orderstatus == 1"
            >
            </el-switch> -->
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" width="200px" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="openDialog1(scope.row, scope.$index)"
              >通知缴费</el-button
            >
            <el-button
              size="mini"
              type="primary"
              plain
              @click="openDialog2(scope.row, scope.$index)"
              >缴费详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="modal">
      <div class="dialog1">
        <el-dialog
          title="车位订单通知"
          :visible.sync="dialogVisible1"
          width="50%"
          :before-close="handleClose1"
        >
          <el-form
            :model="dialogForm1"
            :rules="rulesForm1"
            ref="dialogForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="开始日期" prop="startdate">
              <el-date-picker
                v-model="dialogForm1.startdate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd+HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="enddate">
              <el-date-picker
                v-model="dialogForm1.enddate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd+HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="应缴金额" prop="orderpay">
              <el-input v-model="dialogForm1.orderpay"></el-input>
            </el-form-item>
            <el-form-item label="缴费状态" prop="orderstatus">
              <el-select
                v-model="dialogForm1.orderstatus"
                placeholder="请选择缴费状态"
              >
                <el-option label="已缴费" :value="1"></el-option>
                <el-option label="未缴费" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通知缴费" prop="note">
              <el-input type="textarea" v-model="dialogForm1.note"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button type="primary" @click="dialogVisible1 = false"
              >关闭</el-button
            >
            <el-button type="primary" @click="submitForm1('dialogForm1')"
              >通知</el-button
            >
            <el-button @click="resetForm1()">重置</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="dialog2">
        <el-dialog
          title="车位订单详情"
          :visible.sync="dialogVisible2"
          width="50%"
          :before-close="handleClose2"
        >
          <el-form
            :model="dialogForm1"
            :rules="rulesForm1"
            ref="dialogForm1"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="开始日期" prop="startdate">
              <el-date-picker
                v-model="dialogForm1.startdate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd+HH:mm:ss"
                disabled
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="enddate">
              <el-date-picker
                v-model="dialogForm1.enddate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd+HH:mm:ss"
                disabled
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="应缴金额" prop="orderpay">
              <el-input v-model="dialogForm1.orderpay" disabled></el-input>
            </el-form-item>
            <el-form-item label="缴费状态" prop="orderstatus">
              <el-select
                v-model="dialogForm1.orderstatus"
                placeholder="请选择缴费状态"
                disabled
              >
                <el-option label="已缴费" :value="1"></el-option>
                <el-option label="未缴费" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户回复" prop="note">
              <el-input
                type="textarea"
                v-model="dialogForm1.note"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button type="primary" @click="dialogVisible2 = false"
              >关闭</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import PaySwitch from "./paySwitch.vue";
import { downloadXlsx } from "../../../../utils/xlsx.js";

export default {
  data() {
    return {
      uid1: "",
      uid2: "",
      //对话框1
      dialogForm1: {
        startdate: "",
        enddate: "",
        orderpay: "",
        orderstatus: "",
        note: "",
      },
      //对话框2
      dialogForm2: {
        startdate: "",
        enddate: "",
        orderpay: "",
        orderstatus: "",
        note: "",
      },

      rulesForm1: {
        startdate: [
          { required: true, message: "开始时间为空", trigger: "blur" },
        ],
        enddate: [{ required: true, message: "为空", trigger: "blur" }],
        orderpay: [{ required: true, message: "为空", trigger: "blur" }],
        orderstatus: [{ required: true, message: "为空", trigger: "blur" }],
      },

      //对话框控制
      dialogVisible1: false,
      dialogVisible2: false,
      //分页
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      //表格数据
      tableData: null,
      // 搜索栏
      formInline: {
        parkname: "",
        orderstatus: "",
        orderpay: "",
      },
    };
  },
  components: {
    PaySwitch,
  },
  methods: {
    //表一提交重置
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("parking/payParkOrder", {
              u_id: this.uid1,
              orderstatus: this.dialogForm1.orderstatus,
              reply: this.dialogForm1.note,

              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              console.log(res);
              // this.resetForm1();
              this.dialogVisible1 = false;
              this.getTableData();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm1() {
      // this.$refs[formName].resetFields();
      this.dialogForm1 = {
        startdate: "",
        enddate: "",
        orderpay: "",
        orderstatus: "",
        note: "",
      };
    },
    //对话框控制
    openDialog1(row, index) {
      console.log(row, index);
      this.uid1 = row.id;
      this.dialogVisible1 = true;
      this.dialogForm1.startdate = row.startdate;
      this.dialogForm1.enddate = row.enddate;
      this.dialogForm1.orderpay = row.orderpay;
      this.dialogForm1.orderstatus = row.orderstatus;
      this.dialogForm1.note = row.note;
    },
    openDialog2(row, index) {
      console.log(row, index);
      this.uid2 = row.id;
      this.dialogVisible2 = true;
      this.dialogForm1.startdate = row.startdate;
      this.dialogForm1.enddate = row.enddate;
      this.dialogForm1.orderpay = row.orderpay;
      this.dialogForm1.orderstatus = row.orderstatus;
      this.dialogForm1.note = row.reply;
    },
    handleClose1(done) {
      done();
    },
    handleClose2(done) {
      done();
    },
    // UTC时间格式化方法
    formatUTCTime(utcString) {
      if (!utcString) return "--";
      return dayjs(utcString).format("YYYY-MM-DD HH:mm:ss");
    },
    //初始化表格数据
    getTableData() {
      this.$axios
        .get("parking/getParkOrder", {
          params: {
            parkname: "",
            orderstatus: "",
            orderpay: "",
            pageNum: this.pageSize,
            currPage: this.pageNumber - 1,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getTableData();
    },
    //搜索栏重置
    onClear() {
      this.formInline.parkname = "";
      this.formInline.orderstatus = "";
      this.formInline.orderpay = "";
    },
    //全量导出
    onExport() {
      let list = [];
      for (let i = 0; i < this.tableData.length; i++) {
        let arr = [];
        arr.push(this.tableData[i]["parkname"]);
        arr.push(this.tableData[i]["parkpay"]);
        arr.push(this.tableData[i]["startdate"]);
        arr.push(this.tableData[i]["enddate"]);
        arr.push(this.tableData[i]["orderpay"]);
        arr.push(this.tableData[i]["orderstatus"]);
        list.push(arr);
      }
      // console.log()
      downloadXlsx(list, "全量.xlsx");
    },
    //搜索栏搜索
    onSearch() {
      this.$axios
        .get("parking/getParkOrder", {
          params: {
            parkname: this.formInline.parkname,
            orderstatus: this.formInline.orderstatus,
            orderpay: this.formInline.orderpay,
            pageNum: this.pageSize,
            currPage: this.pageNumber - 1,
          },
        })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
.pay::v-deep {
  .table {
    thead {
      tr {
        th {
          font-size: 14px;
          color: black;
          background-color: #ebebeb;
        }
      }
    }
  }
  .modal {
    .dialog1 {
      .el-form {
        .el-select {
          width: 100%;
        }
        .el-input {
          width: 100%;
        }
      }
    }
    .dialog2 {
      .el-form {
        .el-select {
          width: 100%;
        }
        .el-input {
          width: 100%;
        }
      }
    }
  }
}
</style>